<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文件上载演示</title>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <style>
        ul>li{
            list-style-type: none;
        }
    </style>
</head>
<body>
<h1>文件上传案例演示:</h1>
<form id="fileForm" method="post"
                    enctype="multipart/form-data"
                    onsubmit="return doUpload()">
    <div>
        <ul>
            <li><input id="uploadFile" type="file" name="uploadFile"></li>
            <li><button type="submit">上传文件</button></li>
        </ul>
    </div>
</form>
</body>
<script>
    //jquery代码的表单提交事件
    function doUpload(){
        debugger //debug窗口打开以后调试代码
        //获得用户选中的所有图片(获得数组)
        let files=document.getElementById("uploadFile").files;
        if(files.length>0){
            //获得用户选中的唯一文件(从数组中取出)
            let file=files[0];
            //开始上传这个文件
            //由于上传代码比较多,不想和这里其它代码干扰,所以定义一个方法调用
            upload(file);
        }
        //阻止表单提交效果
        return false;
    };
    // 将file上传到服务器的方法
    function upload(file){
        //定义一个表单
        let form=new FormData();
        //将图片添加到表单中
        form.append("uploadFile",file);
        //let url="http://localhost:8881/resource/upload";
        let url="http://localhost:9000/sca/resource/upload/";
        //异步提交方式1
        axios.post(url,form,{headers:{"Authorization":"Bearer "+localStorage.getItem("accessToken")}})
             .then(function (response){
                 alert("upload ok");
              })
             .catch(function(error) {
               if(error.response.status==401){
                 alert("请先登陆");
                 location.href="/login-sso.html";
               }else if(error.response.status==403){
                 alert("没有这个访问权限");
               }
        });

    }
</script>
</html>
